<template>
<div>
  <h3>专业名录</h3>

  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="7">
        <el-input placeholder="请输入内容"
                  v-model="quertInfo.searchText" clearable
        @clear="getMajorlist">
          <el-button slot="append" icon="el-icon-search"
          @click="getMajorlist">
          </el-button>
        </el-input>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisable = true">添加专业</el-button>
      </el-col>
    </el-row>

    <el-table :data = majorList>
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column label="专业号" prop="MNo"></el-table-column>
      <el-table-column label="专业名称" prop="MName"></el-table-column>
      <el-table-column label="计划内招生" prop="PlannedEnrollment"></el-table-column>
      <el-table-column label="计划外招生" prop="UnPlannedEnrollment"></el-table-column>
      <el-table-column label="操作" width="200px">
        <!--修改按钮-->
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini"
          @click="showEditDialog(scope.row.MNo)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
  <!--添加专业-->
  <el-dialog
    title="添加专业"
    :visible.sync="addDialogVisable"
    width="50%" @close="addDialogClosed">
    <el-form :model="addForm"  ref="addFormRed" label-width="100px" >
      <el-form-item label="专业号" prop="MNo">
        <el-input v-model="addForm.MNo"></el-input>
      </el-form-item>

      <el-form-item label="专业名称" prop="MName">
        <el-input v-model="addForm.MName"></el-input>
      </el-form-item>

      <el-form-item label="计划内招生" prop="PlannedEnrollment">
        <el-input v-model="addForm.PlannedEnrollment"></el-input>
      </el-form-item>

      <el-form-item label="计划外招生" prop="UnPlannedEnrollment">
        <el-input v-model="addForm.UnPlannedEnrollment"></el-input>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="addDialogVisable = false">取 消</el-button>
    <el-button type="primary" @click="addMajor">确 定</el-button>
  </span>
  </el-dialog>

  <!--修改用户-->
  <el-dialog
    title="修改用户"
    :visible.sync="editdialogVisible"
    width="50%" @close="editDialogClosed">
    <el-form :model="editForm" ref="editFormRef" label-width="100px">

      <el-form-item label="专业码" >
        <el-input v-model="editForm.MNo" disabled></el-input>
      </el-form-item>

      <el-form-item label="专业名" >
        <el-input v-model="editForm.MName" ></el-input>
      </el-form-item>

      <el-form-item label="计划内人数" prop="inplan">
        <el-input v-model="editForm.PlannedEnrollment" ></el-input>
      </el-form-item>

      <el-form-item label="计划外人数" prop="outplan">
        <el-input v-model="editForm.UnPlannedEnrollment" ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" >
    <el-button @click="editdialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="editMajorInfo">确 定</el-button>
  </span>
  </el-dialog>

</div>
</template>

<script>
export default {
  data() {
    return {
      //获取列表参数
      quertInfo: {
        searchText: '',
        page: 1,
        //当前每页显示多少条数据
        limit: 100
      },
      majorList: [],
      total: 0,
      addDialogVisable:false,
      addForm:{
        MNo: '',
        MName: '',
        PlannedEnrollment: '',
        UnPlannedEnrollment: ''
      },
      editdialogVisible: false,
      editForm: {

      }
    }
  },
  created() {
    this.getMajorlist()
  },

  methods: {
    async getMajorlist() {
      const {data: res} = await this.$http.get('majordic', {params: this.quertInfo})
      this.total = res.data.total
      this.majorList = res.data.value
    },
    addDialogClosed() {
      this.$refs.addFormRed.resetFields()
    },
    //添加
    addMajor() {
          this.$http.post('majordic', this.addForm)
          this.$message.success('添加成功')
          this.addDialogVisable = false
          this.getMajorlist()
      },
    async showEditDialog(MNo) {
      this.quertInfo.searchText = MNo
      const {data: res} = await this.$http.get('majordic', {params: this.quertInfo})
      this.editForm = res.data.value[0]
      this.editdialogVisible = true
    },
    //监听修改
    editDialogClosed() {
      this.$refs.editFormRef.resetFields()
    },
    editMajorInfo() {
      this.$http.put('majordic', {
        majorname: this.editForm.majorname,
        inplan: this.editForm.inplan,
        outplan: this.editForm.outplan
      })
      this.editdialogVisible = false
      this.getMajorlist()
    }
  }
}
</script>

<style scoped>

</style>
